<template>
    <div class="star" :class="starType">
        <span v-for="(item, index) in itemClasses" :key="index" class="star-item" :class="item"></span>
    </div>
</template>

<script>
const LENGTH = 5
const STAR_ON = 'on'
const STAR_HALF = 'half'
const STAR_OFF = 'off'

export default {
  data () {
    return {
    }
  },
  props: {
    score: {
      type: Number
    },
    size: {
      type: Number
    }
  },
  computed: {
      starType: function() {
          return 'star-' + this.size
      },
      itemClasses: function() {
        let result = []
        let score = Math.floor(this.score * 2) / 2
        for (let i = 0, count = Math.floor(score); i < count; i++) {
          result.push(STAR_ON)
        }
        score % 1 !== 0 && result.push(STAR_HALF)
        while (result.length < LENGTH) {
          result.push(STAR_OFF)
        }
        return result
      }
  },
  methods: {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
    .star
        display: flex
        justify-content: center
        &.star-48
            .star-item
                margin-right: 22px
                &.on
                    base_image('star48_on', 20px, 19px)
                &.half
                    base_image('star48_half', 20px, 19px)
                &.off
                    base_image('star48_off', 20px, 19px)
                &:last-child
                    margin-right: 0
        &.star-36
            .star-item
                margin-right: 6px
                &.on
                    base_image('star36_on', 15px, 15px)
                &.half
                    base_image('star36_half', 15px, 15px)
                &.off
                    base_image('star36_off', 15px, 15px)
                &:last-child
                    margin-right: 0
        &.star-24
            .star-item
                margin-right: 3px
                &.on
                    base_image('star24_on', 10px, 10px)
                &.half
                    base_image('star24_half', 10px, 10px)
                &.off
                    base_image('star24_off', 10px, 10px)
                &:last-child
                    margin-right: 0                    
</style>
